<template>
  <div class="trademark" :class="more ? 'more': 'nomore'">
    <ul class="brand-list word-break">
      <li
        :class="checkList.includes(index)? 'active':''"
        v-for="(item,index) in brandList"
        :key="index"
        @click="chooseBrand(index)"
      >{{ item | formatBrand }}</li>
    </ul>
    <div v-show="!more" class="more" @click="changeMore">
      更多
      <i class="iconfont icon-arrow-bottom arrow" />
    </div>
  </div>
</template>

<script>
import { loadBrand } from '@/api/search/newConseQuence'
export default {
  name: 'BrandList',
  filters: {
    // 格式化品牌
    formatBrand: function(value) {
      if (value.chineseName && value.englishName) {
        return `${value.chineseName}(${value.englishName})`
      } else if (value.chineseName) {
        return value.chineseName
      }
      return value.englishName
    }
  },
  props: {
    selectedBrand: {
      type: Object,
      required: true
    },
    condition: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 品牌更多
      brandList: [],
      // 选中的品牌id key为下标，
      brandIdMap: new Map(),
      checkList: [], // 选中品牌
      more: false // 更多
    }
  },
  created() {
    this.getData()
  }, methods: {
    // 格式化品牌
    formatBrand(value) {
      if (value.chineseName && value.englishName) {
        return `${value.chineseName}(${value.englishName})`
      } else if (value.chineseName) {
        return value.chineseName
      }
      return value.englishName
    },
    // 改变更多的状态
    changeMore() {
      this.more = true
    },
    // 获取品牌列表
    getData() {
      const childCategoryId = this.condition.childCategory.id
      const mainCategoryId = this.condition.mainCategory.id
      const proaId = this.condition.proaId
      const probId = this.condition.probId
      const procId = this.condition.procId
      const prodId = this.condition.prodId
      const proeId = this.condition.proeId
      const lng = this.condition.address.longitude
      const lat = this.condition.address.latitude
      const searchRange = this.condition.searchRange
      const buyNum = this.condition.buyNum
      const skuNumFlag = this.condition.skuNumFlag
      loadBrand({ childCategoryId, mainCategoryId, proaId, probId, procId, prodId, proeId, lng, lat, searchRange, buyNum, skuNumFlag }).then(res => {
        const tempVal = new Map()
        res.data.forEach(e => {
          const tempIds = tempVal.get(`(${e.chineseName}（${e.englishName})`)
          if (!tempIds) {
            tempVal.set(`(${e.chineseName}（${e.englishName})`, { chineseName: e.chineseName, englishName: e.englishName, id: [e.id] })
          } else {
            tempIds.id.push(e.id)
          }
        })
        this.brandList = [...tempVal.values()]
        this.resetBrand()
      })
    },
    // 选中品牌
    chooseBrand(index) {
      // 存储已选品牌的下标，若已存在则移出数组，若不存在则添加到数组中，实现多选反选品牌
      const itemIndex = this.checkList.indexOf(index)
      if (itemIndex > -1) {
        this.brandIdMap.delete(this.checkList[itemIndex])
        this.checkList.splice(itemIndex, 1)
      } else {
        this.checkList.push(index)
        this.brandIdMap.set(index, this.brandList[index].id)
      }
      let brandId = []
      this.brandIdMap.forEach(function(value) {
        brandId = brandId.concat(value)
      })
      this.selectedBrand.brandId = brandId
      let text = ''
      this.checkList.forEach(e => {
        text += `${this.formatBrand(this.brandList[e])},`
      })
      this.selectedBrand.text = text.substring(0, text.length - 1)
      this.$emit('refreshCondition', 1)
    },
    // 重置
    resetBrand() {
      this.brandIdMap.clear()
      this.selectedBrand.text = ''
      this.selectedBrand.brandId = []
      this.checkList = []
    }
  }
}
</script>

<style lang='scss' scoped >
  .more {
    height: 125px;
    overflow-y:auto ;
  }
  .nomore{
    max-height: 65px;
    overflow-y: hidden;
  }
  .trademark{
    .brand-list {
      width: 1050px;
      display: flex;
      flex-wrap: wrap;
      li {
        cursor: pointer;
        display: inline-block;
        margin-right: 20px;

      }
      .active {
        color: #ff3b30;
      }
    }
    .more{
      position: absolute;
      right: 40px;
      top: 0;
      width: 70px;
      height: 28px;
      line-height: 23px;
      border: 1px solid #E5E5E5;
      text-align: center;
      color:#8E8E93;
      cursor: pointer;
      .arrow{
        font-size: 20px;
      }
    }

  }

</style>
